<template>
  <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
      <transition name="hello">
        <h1 v-show="isShow">你好啊！凌宸</h1>
      </transition>
  </div>
</template>

<script>
    export default {
      name:'Test',
      data(){
        return {
          isShow:true
        }
      }
    }
</script>

<style>
  h1{
    background-color: orange;
  }

  .hello-enter-active{
    animation: lingchen 1s linear;
  }
  
  .hello-leave-active{
    animation: lingchen 1s linear reverse;
  }

  @keyframes lingchen {
    from{
      transform: translateX(-100%);
    }
    to{
      transform: translateX(0px);
    }
  }
</style>